.event{
    position: absolute;
    box-sizing: border-box;
    box-shadow: 0 -5px 5px -2px rgba(0,0,0,0.15);
    width: 100%;
    z-index: 10;
}
.eventItem{
    width: 100%;
    height: 100%;
    background-color: #00BC3A;;
    border: 1px solid #00BC3A;
    box-sizing: border-box;
    z-index: 99;
    font-size: smaller;
    opacity: 0.8;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select:none; 
    user-select:none;
    box-shadow: 0 0 1px 1px rgba(174, 183, 204, 0.5);
    color: #FFF;
}
.eventItem:hover{
    background-color: #00AF36;
}
.eventItem span{
    color: #FFF;
}
.active>.eventItem{
    z-index: 100;
    background-color: #099033;
    opacity: 0.95;
    width: 100%;
    border-color: blue;
}
/* 选中false */
.fasleitem .eventItem{
    background-color: #EE6867;
    border-color: #EE6867;
}
.fasleitem .eventItem:hover{
    background-color: #DD5352;
}
/* 选中的是null */
.nullitem .eventItem{
    background-color: rgb(143, 142, 142);
    border-color: rgb(143, 142, 142);
}
.nullitem .eventItem:hover{
    background-color: rgb(122, 122, 122);
}

// 下面是枚举类型的颜色
$itemColor:#00BC3A,#EE6867,#EAC151,#8E7AFF,#E55FA0,#03D3B1,#3786FF,#8B608B,#44446E,#8B683C,#539B53;
@for $i from 1 to length($itemColor) + 1 {
    .color#{$i} .eventItem{
        background-color:#{nth($itemColor,$i)};
        border-color: #{nth($itemColor,$i)};
    }
    .color#{$i} .eventItem:hover{
        background-color:#{lighten(nth($itemColor,$i),10%)};
    }
}